<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Music Player with Slider | Swiper JS</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
		<link rel="stylesheet" href="./musicPlayer.css"/>
	</head>
	<body>
		<div class="album-cover">
			<div class="swiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<!-- <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/d3ca28bf-e1b7-467e-a00b-c7785be8e397" /> -->
						<img src="images/d3ca28bf-e1b7-467e-a00b-c7785be8e397.jpg"/>
						<div class="overlay">
							<a href="https://www.youtube.com/watch?v=aatr_2MstrI&ab_channel=CleanBandit"
								target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
						</div>
					</div>
					<div class="swiper-slide">
						<!-- <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/1afe4c6a-0287-43f0-9076-92f8be49d9dc" /> -->
						<img src="images/1afe4c6a-0287-43f0-9076-92f8be49d9dc.jpg"/>
						<div class="overlay">
							<a href="https://www.youtube.com/watch?v=qEnfeG8uBRY&ab_channel=AliciaKeys-Topic"
								target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
						</div>
					</div>
					<div class="swiper-slide">
						<!-- <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/abaa23bd-8c93-4219-a3ef-0d0cb6f12566" /> -->
						<img src="images/abaa23bd-8c93-4219-a3ef-0d0cb6f12566.jpg"/>
						<div class="overlay">
							<a href="https://www.youtube.com/watch?v=LgsaD-vNJ9M" target="_blank"><ion-icon
									name="logo-youtube"></ion-icon></a>
						</div>
					</div>
					<div class="swiper-slide">
						<!-- <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/bd9bcc80-a9ab-4d54-a460-ffdb77f22a72" /> -->
						<img src="images/bd9bcc80-a9ab-4d54-a460-ffdb77f22a72.jpg"/>
						<div class="overlay">
							<a href="https://www.youtube.com/watch?v=a5uQMwRMHcs&ab_channel=DaftPunkVEVO"
								target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
						</div>
					</div>
					<div class="swiper-slide">
						<!-- <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/18bc2436-740b-44c4-9dd8-fd7be51a07ad" /> -->
						<img src="./images/18bc2436-740b-44c4-9dd8-fd7be51a07ad.jpg"/>
						<div class="overlay">
							<a href="https://www.youtube.com/watch?v=H5v3kku4y6Q&ab_channel=HarryStylesVEVO"
								target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
						</div>
					</div>
					<div class="swiper-slide">
						<!-- <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/4c5c1727-8b32-48c1-91de-b0496ccf10f6" /> -->
						<img src="./images/4c5c1727-8b32-48c1-91de-b0496ccf10f6.jpg"/>
						<div class="overlay">
							<a href="https://www.youtube.com/watch?v=9HDEHj2yzew&ab_channel=DuaLipa"
								target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
						</div>
					</div>
					<div class="swiper-slide">
						<!-- <img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/23e440e5-a0fa-4a85-8175-bcc485a20ee6" /> -->
						<img src="./images/23e440e5-a0fa-4a85-8175-bcc485a20ee6.jpg"/>
						<div class="overlay">
							<a href="https://www.youtube.com/watch?v=tCXGJQYZ9JA&ab_channel=TaylorSwiftVEVO"
								target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="music-player">
			<h1>Title</h1>
			<p>Song Name</p>

			<audio id="song">
				<source src="song-list/Luke-Bergs-Gold.mp3" type="audio/mpeg" />
			</audio>

			<input type="range" value="0" id="progress" />

			<div class="controls">
				<button class="backward">
					<i class="fa-solid fa-backward"></i>
				</button>
				<button class="play-pause-btn">
					<i class="fa-solid fa-play" id="controlIcon"></i>
				</button>
				<button class="forward">
					<i class="fa-solid fa-forward"></i>
				</button>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
		<script src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
		<script src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
		<script src="./musicPlayer.js"></script>
	</body>
</html>